<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>悟诚企业智能运营监控平台 - 首页</title>
    <!-- 引入Tailwind CSS -->
    <script src="tailwindcss.js"></script>
    <!-- 引入Font Awesome -->
    <link href="font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色作为主色调
                        secondary: '#10B981', // 绿色作为辅助色
                        warning: '#F59E0B', // 警告色
                        danger: '#EF4444', // 危险色
                        success: '#10B981', // 成功色
                        neutral: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .card-hover {
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .card-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .nav-item-hover {
                transition: all 0.3s ease;
            }
            .nav-item-hover:active {
                transform: scale(0.95);
            }
            .fade-in {
                animation: fadeIn 0.5s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #F3F4F6;
        }
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        @media (max-width: 640px) {
            .nav-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-800">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
            <h1 class="text-xl font-bold text-neutral-800">悟诚企业智能运营监控平台</h1>
            <div class="flex items-center space-x-4">
                <!-- <button class="text-neutral-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell-o text-xl"></i>
                </button> -->
                <div class="relative">
                    <button class="flex items-center space-x-2 text-neutral-600 hover:text-primary transition-colors">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 内容区域 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 欢迎信息 -->
        <div class="bg-white rounded-lg p-4 mb-6 card-shadow fade-in">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold">您好，欢迎登录</h2>
                    <p class="text-sm text-neutral-500" id="current-date"></p>
                    <p class="text-sm text-neutral-500" style="color:red;">当前系统环境为演示环境，数据均为模拟数据。</p>
                </div>
                <!-- <div class="bg-primary/10 p-3 rounded-full">
                    <i class="fa fa-home text-primary text-xl"></i>
                </div> -->
            </div>
        </div>

        <!-- 导航功能按钮网格 -->
        <div class="nav-grid mb-6">

            <!-- PMO项目管理分析 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-tasks text-amber-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">项目分析</span>
                </div>
            </div>
            

            <!-- 销售分析 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-line-chart text-primary text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">销售分析</span>
                </div>
            </div>

            <!-- 智库分析 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-lightbulb-o text-purple-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">智库分析</span>
                </div>
            </div>

            <!-- 库存分析 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-archive text-amber-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">库存分析</span>
                </div>
            </div>

            <!-- 生产进度 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-industry text-green-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">生产进度</span>
                </div>
            </div>

            <!-- 采购进度 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-shopping-cart text-teal-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">采购进度</span>
                </div>
            </div>

            <!-- 设计进度 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-paint-brush text-pink-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">设计进度</span>
                </div>
            </div>

            <!-- 发货情况 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-truck text-indigo-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">发货情况</span>
                </div>
            </div>

            <!-- 人力分析 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-rose-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-users text-rose-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">人力分析</span>
                </div>
            </div>

            <!-- 资金分析 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-money text-emerald-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">资金分析</span>
                </div>
            </div>
            
            <!-- 质检分析 -->
            <div class="bg-white rounded-lg p-4 card-shadow card-hover nav-item-hover">
                <div class="flex flex-col items-center justify-center h-full">
                    <div class="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center mb-3">
                        <i class="fa fa-check-circle text-cyan-600 text-xl"></i>
                    </div>
                    <span class="text-sm font-medium">质检分析</span>
                </div>
            </div>
            
        </div>

        <!-- 快速入口/最近访问 -->
        <!-- <div class="bg-white rounded-lg p-4 card-shadow fade-in">
            <h2 class="text-base font-semibold mb-3">快速入口</h2>
            <div class="flex space-x-3 overflow-x-auto pb-2">
                <button class="bg-primary/10 text-primary text-sm px-4 py-2 rounded-full whitespace-nowrap">业绩汇总</button>
                <button class="bg-neutral-100 text-neutral-600 text-sm px-4 py-2 rounded-full whitespace-nowrap">区域回款</button>
                <button class="bg-neutral-100 text-neutral-600 text-sm px-4 py-2 rounded-full whitespace-nowrap">销售排行</button>
                <button class="bg-neutral-100 text-neutral-600 text-sm px-4 py-2 rounded-full whitespace-nowrap">项目进度</button>
            </div>
        </div> -->
        <!-- 添加底部间距，确保内容不被底部导航遮挡 -->
        <div class="h-20"></div>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-neutral-200 py-2 px-4">
        <div class="flex justify-around items-center">
            <button class="flex flex-col items-center text-primary">
                <i class="fa fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <!-- <button class="flex flex-col items-center text-neutral-500">
                <i class="fa fa-bar-chart text-xl mb-1"></i>
                <span class="text-xs">数据</span>
            </button> -->
            <button class="flex flex-col items-center text-neutral-500">
                <i class="fa fa-bell text-xl mb-1"></i>
                <span class="text-xs">消息</span>
            </button>
            <button class="flex flex-col items-center text-neutral-500">
                <i class="fa fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </footer>

    <script>
        // 设置当前日期
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
        });

        // 为导航按钮添加点击事件
        document.querySelectorAll('.nav-grid > div').forEach(item => {
            item.addEventListener('click', function() {
                // 这里可以添加页面跳转逻辑或显示加载动画
                const title = this.querySelector('span').textContent;
                console.log(`点击了: ${title}`);
                
                // 销售分析跳转到xiaoshou.html
                if (title === '销售分析') {
                    window.location.href = 'xiaoshou.html';
                }else if(title === '项目分析'){
                    window.location.href = 'pmo.html';
                } else {
                    // 其他功能显示提示信息
                    alert('正在建设中，敬请期待。。。');
                }
            });
        });

        // 为快速入口按钮添加点击事件
        document.querySelectorAll('.bg-primary\/10, .bg-neutral-100').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有按钮的激活状态
                document.querySelectorAll('.bg-primary\/10').forEach(el => {
                    el.classList.remove('bg-primary/10', 'text-primary');
                    el.classList.add('bg-neutral-100', 'text-neutral-600');
                });
                // 添加当前按钮的激活状态
                this.classList.remove('bg-neutral-100', 'text-neutral-600');
                this.classList.add('bg-primary/10', 'text-primary');
            });
        });
        
    </script>

</html>
